// 获取 banner 父元素
const content = document.querySelector(".content");

// https://open-api.zol.com/api/b2g.public.homeinfo.gethomeinfo?sa=pc
// 请求轮播图数据和模块的数据
getBanner();
async function getBanner() {
  const res = await pAjax({
    url: "/zgcBanner?sa=pc",
    dataType: "json",
  });
  // console.log(res);

  // 渲染轮播图

  let bannerStr = "";

  bannerStr += `
<div class="swiper">
<div class="swiper-wrapper">
`;

  res.data.banner.forEach(function (item) {
    bannerStr += `
  <div class="swiper-slide">
  <img src="${item.img}" alt="">
  </div>
  `;
  });
  bannerStr += `

</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>

<div class="content-right">
<div class="login">
  <ul class="login-tabs">
    <li class="activeTab loginTab">会员登录</li>
    <li class="loginTab">
      <a href="javascript:;">供应商登录</a>
    </li>
  </ul>
  <!---->
  <div class="notLogin">
    <input type="text" placeholder="手机号/邮箱/用户名" class="phone">
    <input type="password" placeholder="密码" class="password">
    <button class="loginBtn">登录</button>
    <div class="operation">
      <a href="javascript:;">忘记密码</a>
      <a href="./register.html">注册</a>
    </div>
  </div>
</div>
<div class="news">
  <a href="javascript:;">
    <div>
      <img
        src=""
        alt="">
    </div>
    极速体验
  </a>
  <a href="javascript:;">
    <div>
      <img
        src=""
        alt="">
    </div>
    优采保障
  </a>
  <a href="javascript:;">
    <div>
      <img
        src=""
        alt="">
    </div>
    售后无忧
  </a>
  <a href="javascript:;">
    <div>
      <img
        src=""
        alt="">
    </div>
    专属客服
  </a>
</div>
</div>
`;
  content.innerHTML = bannerStr;

  // 轮播图
  var mySwiper = new Swiper(".swiper", {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 自动播放
    autoplay: true,

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    effect: "fade",
  });

  //鼠标滑过pagination控制swiper切换
  for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
    mySwiper.pagination.bullets[i].onclick = function () {
      this.click();
    };
  }
}

// 渲染 floor
const floor = document.querySelector(".floor");
getFloor();
async function getFloor() {
  const res = await pAjax({
    url: "/zgcBanner?sa=pc",
    dataType: "json",
  });
  // console.log(res);

  let floorStr = "";

  res.data.floor.forEach(function (item) {
    floorStr += `
    <div class="catgegory">
    <div class="catgegory-title-box">
      <h3>${item.floorName}</h3>
      <div class="catgegory-title-classList">
        <a href="./list.html?cateid=${item.classification[0].cateId}">${item.classification[0].name}</a>
        <a href="./list.html?cateid=${item.classification[1].cateId}">${item.classification[1].name}</a>
        <a href="./list.html?cateid=${item.classification[2].cateId}">${item.classification[2].name}</a>
        
      </div>
    </div>
    <div class="catgegory-content">
      <div>
        <div class="catgegory-content-banner"
          style="background-image: url(https://icon.zol-img.com.cn/ucdn/b-zol-com/1.0.2/img/floor01.ce043a8d.jpg); background-repeat: no-repeat; background-size: 100%;">
          <h3 class="catgegory-content-banner-title">${item.floorDesc}</h3>
        </div>
      </div>
      <ul class="catgegory-content-proList">
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[0].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[0].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[0].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[0].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[1].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[1].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[1].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[1].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[2].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[2].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[2].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[2].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[3].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[3].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[3].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[3].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[4].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[4].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[4].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[4].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[5].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[5].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[5].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[5].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[6].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[6].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[6].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[6].goodsPrice}</p>
          </a>
        </li>
        <li class="catgegory-content-product-li">
          <a href="./detail.html?goodsId=${item.goodsList[7].goodsId}" class="catgegory-content-product">
            <div class="catgegory-content-product-img-box">
              <img
                src="${item.goodsList[7].goodsIndexPic}"
                alt="">
            </div>
            <p class="catgegory-content-proName">${item.goodsList[7].goodsName}</p>
            <p class="catgegory-content-price">￥${item.goodsList[7].goodsPrice}</p>
          </a>
        </li>
      </ul>
    </div>
  </div>

    `;
  });

  floor.innerHTML = floorStr;
}

// ?page=1&number=30&sa=pc
// 热门采购渲染
const hot = document.querySelector(".common-Popular");

getHot();
async function getHot() {
  const res = await pAjax({
    url: `/rmcg?page=${pageNum}&number=6&sa=pc`,
    dataType: "json",
  });
  // console.log(res);
  let hotSrt = "";
  hotSrt += `
  <div class="popular-title">
  <h3>热门采购</h3>
  <div class="refresh">
    换一换
    <span class="refresh-icon aa"></span>
  </div>
</div>
<div class="popular-content">
`;

  res.data.forEach(function (item) {
    hotSrt += `
    <a href="" class="popular-item">
    <div class="proImg">
      <img
        src="${item.picUrl}"
        alt="">
    </div>
    <p class="proName">${item.goodsName}</p>
    <p class="price">¥${item.sellPrice}</p>
    <button class="shop">立即采购</button>
  </a>`;
  });

  hotSrt += "</div>";

  hot.innerHTML = hotSrt;
}

// 热门采购 换一换 点击事件
const commonPopular = document.querySelector(".common-Popular");
commonPopular.addEventListener("click", function (e) {
  if (e.target.className === "refresh") {
    pageNum = pageNum >= 5 ? 1 : pageNum + 1;
    getHot();
  }
});

// ?sa=pc
const govbox = document.querySelector(".platform-content-home");
// 政府采购电商平台渲染
getgov();
async function getgov() {
  const res = await pAjax({
    url: "/zfcg?sa=pc",
    dataType: "json",
  });
  // console.log(res);

  let govStr = "";
  res.data.forEach(function (item) {
    govStr += `
    <a href="${item.url}" class="platform-item-box">
  <div class="platform-image">
    <img src="${item.image}" alt="">
  </div>
  <div class="platform-name">${item.name}</div>
</a>
    `;
  });

  govbox.innerHTML = govStr;
}
 // 获取 我的购物车 角标,从 localStroage 中取出 cart 数组 角度 = cart 数组的 length
// const cartNum = document.querySelector(".cartNum");
// const cart = JSON.parse(localStorage.cart);
// cartNum.innerHTML = cart.length;
